﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Custom Formatter</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;

        function CustomDateFormat() {

        }

        CustomDateFormat.prototype = new spreadNS.CustomFormatterBase();

        CustomDateFormat.prototype.Format = function (obj, conditionalForeColor) {
            var date = new Date(obj);

            if (date instanceof Date && isFinite(date)) {
                if (date.getFullYear() > 1990) {
                    conditionalForeColor.value = "blue";
                }
                else {
                    conditionalForeColor.value = "red";
                }
                return (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
            }
            else {
                return obj != null ? obj.toString() : "";
            }
        }

        CustomDateFormat.prototype.Parse = function (str) {
            return new spreadNS.GeneralFormatter().Parse(str);
        }

        function CustomNumberFormat() {

        }

        CustomNumberFormat.prototype = new spreadNS.CustomFormatterBase();

        CustomNumberFormat.prototype.Format = function (obj, conditionalForeColor) {
            if (typeof obj === "number") {
                return formatNumber(obj, conditionalForeColor);
            } else if (typeof obj === "string") {
                if ($.isNumeric(obj)) {
                    return formatNumber(parseFloat(obj), conditionalForeColor);
                }
            }

            return obj ? obj.toString() : "";
        }

        function formatNumber(value, conditionalForeColor) {
            if (isFinite(value)) {
                if (value >= 10) {
                    conditionalForeColor.value = "green";
                } else if (value > 0) {
                    conditionalForeColor.value = "gold";
                } else {
                    conditionalForeColor.value = "blue";
                }
            } else {
                conditionalForeColor.value = "red";
            }

            return value.toString();
        }

        CustomNumberFormat.prototype.Parse = function (str) {
            return new spreadNS.GeneralFormatter().Parse(str);
        }

        $(document).ready(function () {
            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"));
            initSpread(spread);
        });

        function initSpread(spread) {
            var sheet = spread.getSheet(0);
            
            spread.isPaintSuspended(true);

            sheet.setName("Custom Formatter");
            initData(sheet);

            spread.isPaintSuspended(false);
        };

        function initData(sheet) {
            sheet.setArray(0, 0, [
                [123, new Date(2002, 2, 6)],
                ["-18", "1988/3/2"],
                ["0", "Oct 9, 2011"],
                [4, 4],
                [NaN, NaN],
                [Infinity, Infinity]
            ]);

            for (var c = 0; c < 2; c++) {
                sheet.setColumnWidth(c, 120);
            }

            sheet.getCells(0, 0, 5, 1).formatter(new CustomNumberFormat());
            sheet.getCells(0, 1, 5, 2).formatter(new CustomDateFormat());

            sheet.setText(0, 0, "Custom Number", spreadNS.SheetArea.colHeader);
            sheet.setText(0, 1, "Custom Date", spreadNS.SheetArea.colHeader);
        };
        /*code_end*/
    </script>

</head>
<body>
<div class="sample-turtorial">
    <div id="ss" style="width:100%; height:360px;border: 1px solid gray;"></div>
    <div class="demo-options">
        <div class="option-row" style="padding:2px 10px; background-color:lavender">
            <p>Custome formatters are provided to help format & color cell text: <br /> 
                    1. Color number or numeric string, positive in gold if bigger than 10 in green; NaN and Infinity in red; others in blue.<br /> 
                    2. Date or date string in m/d/yyyy format and color in blue if date is after 1990 otherwise color in red.
            </p>
        </div>
    </div>
</div>
</body>
</html>
